<template>
  <div class="wx">
    <van-panel title="微信提现" class="wx-content">
      <van-cell-group>
      <!--van-field
          v-model="amount"
          clearable
          label="￥"
          :placeholder="placeRotal"
          class="wx-van-filed"
          @input="getPutCount()"
          onkeyup="this.value=this.value.replace(/^[\u4e00-\u9fa5_a-zA-Z]+$/,&quot;&quot;)"
        -->
        <van-field
          v-model="amount"
          clearable
          :placeholder="placeRotal"
          class="wx-van-filed"
          @input="getPutCount()"
          onkeyup="this.value=this.value.replace(/^[\u4e00-\u9fa5_a-zA-Z]+$/,&quot;&quot;)"
        >
          <van-button slot="button" size="small" class="btn-tips" @click="selectAll()">全部</van-button>
        </van-field>
      </van-cell-group>
      <div slot="footer">
        微信提现实际到账金额：￥{{putCount}}
      </div>
    </van-panel>

      <van-cell
        :title="surplusTips"
        class="wx-van-filed-tips"
      />
      <van-button class="put-btn" @click="surePut()">确认提现</van-button>

    <van-panel title="微信提现说明" class="wx-content-tips">
      <p>1、微信提现手续费为95折，最低提现金额为2元</p>
      <p>2、到账时间24小时内到账</p>
      <p>3、查询方式：打开微信-我-钱包-零钱-零钱明细打款</p>
      <p>商户包含：“盛大汽车字样”</p>
    </van-panel>
  </div>
</template>
<script>
export default {
  name: "wx-cash",
  data() {
    return {
      amount: "",
      totals: sessionStorage.getItem("totalRight"),
      placeRotal: "可提现总权益为" + sessionStorage.getItem("totalRight"),
      putCount: 0,
      surplusTips: "剩余权益：" + sessionStorage.getItem("totalRight")
    };
  },
  created() {
    // this.putCount = (parseInt(sessionStorage.getItem('totalRight')*0.95*100)/100).toFixed(2);
  },
  methods: {
    selectAll() {
      this.amount = this.totals;
      this.putCount = (parseInt(this.amount * 0.95 * 100) / 100).toFixed(2);
      const countNum = this.totals / 1 - this.amount / 1;
      this.surplusTips = "剩余权益：" + countNum;
    },
    getPutCount() {
      // if (this.amount > this.totals) {
      //   this.$toast.fail('当前提现的权益已超过您的有效总权益，请重新输入');
      // }
      this.putCount = (parseInt(this.amount * 0.95 * 100) / 100).toFixed(2);
      const countNum = this.totals / 1 - this.amount / 1;
      this.surplusTips = "剩余权益：" + countNum;
      // }
    },
    surePut() {
      const reg = /^\d+(\.\d{0,2})?$/;
      if (!reg.test(this.amount * 1) || this.amount == 0) {
        this.$toast.fail("提现数额必须为数字，且小数点后最多两位哦");
        this.amount = "";
        this.putCount = 0;
        this.surplusTips = "剩余权益：" + this.totals;
      } else if (this.amount < 2) {
        this.$toast.fail("微信提现金额至少为2元哦");
        // this.amount = '';
        // this.putCount = 0;
        // this.surplusTips = '剩余权益：' + this.totals;
      } else if (this.amount * 1 > this.totals * 1) {
        this.$toast.fail("当前提现的权益已超过您的有效总权益，请重新输入");
        this.amount = "";
        this.putCount = 0;
        this.surplusTips = "剩余权益：" + this.totals;
      } else if (this.amount * 1 > 10000) {
        this.$toast.fail("单次提现最大限额为10000");
      } else {
        const sessionParams = sessionStorage.getItem("token");
        const test = { money: this.amount, session: sessionParams };
        const sum = this.totals / 1 - this.amount / 1;
        const putParams = JSON.stringify(test);
        window.open(
          `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbe777fa292e776e0&redirect_uri=http://xb.shengshidalian.com/oilCardMobile/index/wxstate?openId=${putParams}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
        );
      }
    }
  }
};
</script>

<style lang="less">
.wx {
  width: calc(100% - 30px) !important;
  height: 100%;
  position: fixed;
  background: rgba(242, 242, 242, 1);
  opacity: 1;
  .wx-van-filed-tips {
    margin-top: 12px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 300;
    line-height: 30px;
    color: rgba(51, 51, 51, 1);
    opacity: 1;
  }
  .put-btn {
    width: calc(100% - 24px);
    height: 50px;
    background: #ff8a41;
    border-radius: 25px;
    margin: 40px 12px 0px;
    color: #fff;
    font-size: 16px;
    font-family: PingFang SC;
  }
  .wx-content {
    // margin-top: 30px;
    .van-cell {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 300;
      line-height: 28px;
      color: rgba(51, 51, 51, 1);
      opacity: 1;
    }
    .van-cell:not(:last-child)::after {
      border:none !important;
    }
    .wx-van-filed {
      height: 72px;
      line-height: 72px;
      .van-cell__title {
        max-width: 30px !important;
        font-size: 26px !important;
        font-family: PingFang SC;
        font-weight: 300;
        color: rgba(51, 51, 51, 1);
        opacity: 1;
        line-height: 52px;
      }
      .van-cell__value {
        font-size: 16px !important;
        font-family: PingFang SC;
        font-weight: 300;
        line-height: 22px;
        color: rgba(204, 204, 204, 1);
        opacity: 1;
        line-height: 52px;
        .van-field__control {
          color: #333;
          // ::-webkit-input-placeholder { /* WebKit browsers */
          //     color:    #999;
          // }
        }
      }
    }
    .van-panel__footer {
      height: 32px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 300;
      line-height: 32px;
      color: rgba(51, 51, 51, 1);
      opacity: 1;
      padding: 10px 15px !important;
    }
  }
  .wx-content-tips {
    margin-top: 30px;
    background: #f2f2f2;
    .van-panel__header {
      background: #f2f2f2;
    }
    .van-panel__content {
      padding: 8px 15px !important;
      p {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 300;
        line-height: 20px;
        color: rgba(51, 51, 51, 1);
        opacity: 1;
      }
    }
  }
  .btn-tips {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 300;
    color: rgba(255, 138, 65, 1);
    opacity: 1;
    border: none;
  }
}
</style>
<style lang="less" scoped>


</style>

